<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            background: black;
            text-align: end;
        }
        ul li {
            display: inline-block;
            position: relative;
        }
        ul li a {
            background: black;
            display: block;
            padding: 20px 45px;
            color: white;
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }
        .dropdown {
            text-align: center;
            color: white;
            display: block;
            width: 230px;
            padding: 20px;
            background: black;
            position: absolute;
            z-index: 1;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            top: 74px;
            right: 0px;
            display: none;
        }
        ul li a:hover {
           color:  lightseagreen;
        }
        ul li:hover ul.dropdown{
            display: block;
        }
        #active {
            color:lightseagreen;
        }

    </style>
</head>
<body>
    <ul>
        <li><a href="#" id="active">Home</a>
        <ul class="dropdown">
            <li><a href="#">JaveScript</a></li>
            <li><a href="#">教学视频</a></li>
            <li><a href="#">源代码</a></li>
        </ul>
    </li>
        <li><a href="#">HTML</a><ul class="dropdown">
            <li><a href="#">ABCD</a></li>
            <li><a href="#">BGHG</a></li>
            <li><a href="#">FUNK</a></li>
        </ul>
    </li>
        <li><a href="#">CSS</a><ul class="dropdown">
            <li><a href="#">DHDJJ</a></li>
            <li><a href="#">DNHD</a></li>
            <li><a href="#">DKENJ</a></li>
        </ul>
    </li>
        <li>
            <a href="#">More</a>
            <ul class="dropdown">
                <li><a href="#">DHFVHD</a></li>
                <li><a href="#">DHFIV</a></li>
                <li><a href="#">DHFIEY</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>